<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>订单信息管理系统</title>

    <style type="text/css">


        .switch_on span,.switch_on input {
        /* width: 50px;
        height: 60px; */
        position: absolute;
        background: none;
        -webkit-appearance: none;
        }

        .switch_on span.input.checked:before {
        border-color: #64bd63;
        box-shadow: #64bd63 0px 0px 0px 16px inset;
        background-color: #64bd63;
        transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
        }

        .switch_on span.input:before {
        content: '';
        width: 50px;
        height: 30px;
        border-radius: 20px;
        display: inline-block;
        position: absolute;
        /* top: 12.5px; */
        left: -30px;
        border: 1px solid red;
        box-shadow: red 0px 0px 0px 16px inset;
        background-color: red;
        transition: border 0.4s, box-shadow 0.4s;
        background-clip: content-box;
        }


        .switch_on span.input.checked:after {
        left: 0;
        }  

        .switch_on span.input:after {
        content: '';
        width: 30px;
        height: 30px;
        position: absolute;
        /* top: 12.5px; */
        left: -30px;  
        border-radius: 100%;
        background-color: #fff;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        transition: left 0.2s;  
        }
	</style>

    <style type="text/css">

        td,th{
            text-align: center;
        }

        body
            {
                background-color:white;
            }
        .user
            {
                float: left;
                margin-left: 50px;
                margin-top: 50px;
                width: 220px;
                height: 480px;
                border: 1px solid blue;
            }
        a:link
            {
                color:black;
                font-size: 30px;
                font-family: Arial;
            }
        a:hover
            {
                color: red;
            }
        a
            {
                margin-left: 20px;
            }
        .first
            {
                width: 1200px;
                height: 550px;
                border: 1px solid red;
                margin-left: 300px;
                margin-top: 34px;
                padding-left: 20px;
            }
        p
            {
                color: navy;
                font-size: 25px;
                font-family: Arial;
            }
    </style>

    <script>

        function fun(){
            alert("确定删除此条记录？");
        }

        function ischeck(){
         var statue = document.getElementById("uid");
             if(statue.checked){
                  alert("是否确定删除?");
              }else{
                  alert("请选中记录再删除!");
              }
          }

    </script>

</head>

<body>
    <h1 style="text-align:center;">超市订单管理系统 </h1>
    <div>

        <span class="user">
            <br><br><a href="manage.html">订单管理</a><br><br><br><br>
            <a href="input.html">订单信息录入</a><br><br><br><br>
            <a href="modify.html">订单信息修改</a><br><br><br><br>
            <a href="history.html">全部订单</a><br>
        </span>
    </div>

<div class="first">

<div class="container">

    <h1 align="center">订单管理</h1>



    <br><div style="text-align: center;">
        <a class="btn btn-primary" onclick="window.location.href = 'input.html'">添加</a>
        <a class="btn btn-danger" id="delSelected" onclick="ischeck();">批量删除</a>
    </div><br>

    <form id="form" method="post" action="input.html">
        <table border="1" class="table table-bordered table-hover">
            <tr class="success">
                <td><input type="checkbox" id="check">全选</td>
                <th>订单ID</th>
                <th>订单名字</th>
                <th>价格</th>
                <th>时间</th>
                <th>订单状态</th>
                <th>操作</th>
            </tr>

                <body id="tb">

                <tr id="1st">
                    <td><input type="checkbox" name="uid" id="uid"></td>
                    <td>2020001</td>
                    <td>sweater</td>
                    <td>11</td>
                    <td>20200801</td>
                    <td><label class="switch_on" id="switch_btn">
                        <input type="checkbox" checked="checked">
                        <span class="input checked"></span>
                        </label></td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="window.location.href = 'modify.html'">修改</button>
                        <button type="button" class="btn btn-danger" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</button>
                    </td>
                </tr>

                <tr>
                    <td><input type="checkbox" name="uid" id="uid"></td>
                    <td>2021001</td>
                    <td>Tom</td>
                    <td>12</td>
                    <td>20210801</td>
                    <td>Y</td>
                    <td>
                        <button type="button" class="btn btn-primary" onclick="window.location.href = 'modify.html'">修改</button>
                        <button type="button" class="btn btn-danger" onclick='{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}'>删除</button>
                    </td>
                </tr>

                </body>
        </table>
    </form>
 
    <div align="center">

            <ul class="pagination">
                <li>
                    <a href="#">
                        &laquo;
                    </a>
                </li>
                <li><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#">
                        &raquo;
                    </a>
                </li>
                <br>
                <br>
                <button class="btn  btn-info" type="submit">首页</button>
                
                <button class="btn  btn-info" type="submit">上页</button>
                
                <button class="btn  btn-info" type="submit">下页</button>
                
                <button class="btn  btn-info" type="submit">尾页</button>
                <br>
                <a style="font-size: 22px;margin-left:20px" >
                    共35条记录,共5页
                </a>
            </ul>
    </div>
</div>

</div>

<script type="text/javascript">
    document.getElementById("switch_btn").onclick = function () {

    if (this.children[0].checked == true) {

         this.children[1].className = "input checked"

        } else {

              this.children[1].className = "input"

        }

    }
</script>

</body>

    <script>
         document.getElementById("check").onclick = function(){
        var checked = document.getElementById("check").checked;
        var checkson = document.getElementsByName("uid");
        if(checked){
            for(var i = 0; i < checkson.length ;i++){
                checkson[i].checked = true;
            }
        }else{
            for(var i = 0; i < checkson.length ;i++){
                checkson[i].checked = false;
            }
        }
    }

    </script>
    <script src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        //obj是点击行的this
        function deleteTr(obj) {
            //通过this找到父级元素节点
            var tr = obj.parentNode.parentNode;
            //找到表格
            var tbody = tr.parentNode;
            //删除行
            tbody.removeChild(tr);
            //只剩行首时删除表格
            if (tbody.rows.length == 1) {
                tbody.parentNode.removeChild(tbody);
            }
        }
    </script>

</html>